<template>
	<view>
		<!-- <u-cell-group :border="false">
			<view class="temp" v-for="(item, index) in deviceTyepList" :key="index" >
				<u-cell :title="item.siteSubTypeName" :isLink="true" style=""
					arrow-direction="right" @click="handClickItem(item.siteSubTypeCode)">>
					<u--image slot="icon" :src="getIcon(item.siteSubTypeCode)" width="40px" height="40px"></u--image>
					<u-badge slot="value" :value="item.count" shape="horn"></u-badge>
				</u-cell>
			</view>
		</u-cell-group> -->
		<view class="noSearch" v-show="deviceTyepList.length==0">
			<div style="height: 100px;"></div>
			<view class="a" v-show="!isOk">
				<div style="height: 100px;"></div>
				<u-loading-icon mode="circle" size="50px"></u-loading-icon>
			</view>
			<view class="b" v-show="isOk">
				<view class="ccccccc" v-show="!notQx">
					<u-empty mode="search" text="暂无数据"></u-empty>
				</view>
				<view class="ddddddd" v-show="notQx">
					<u-empty mode="page" text="加载失败"></u-empty>
				</view>
			</view>
		</view>
		<view class="list" v-for="(item, index) in deviceTyepList" :key="index"
			style="display: flex;flex-direction: column;background-color: #FFFFFF;">
			<div style="width: 100%;"><u-line></u-line></div>
			<view class="content" @click="handClickItem(item.siteSubTypeCode,item.siteSubTypeName)"
				style="margin-left: 16px;margin-right: 16px;display: flex;justify-content: space-between;margin-top: 12px;margin-bottom: 12px;">
				<view class="left" style="display: flex;align-items: center;">
					<u--image :src="getIcon(item.siteSubTypeCode)" width="40px" height="40px"
						style="margin-right: 5px;"></u--image>
					<view>{{item.siteSubTypeName}}</view>
				</view>
				<view class="right" style="display: flex;align-items: center;">
					<u-badge :value="item.count" shape="horn" style="margin-right: 5px;"></u-badge>
					<u-icon name="arrow-right" color="#909399"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getTypeCount
	} from '@/common/api.js';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['loginStatus', 'isLogin', 'loginMsg']),
		},
		data() {
			return {
				deviceTyepList: [],
				isOk: false,
				notQx: false,
			}
		},
    watch: {
      async loginStatus(status) {
        if (!this.loginStatus) {
        	this.isOk = true
        	this.notQx = true
        	if (this.loginMsg != '') {
        		uni.$u.toast(this.loginMsg)
        	}
        } else {
        	this.isOk = false
        	this.notQx = false
        	await this.initList()
        }
      }
    },
		async onShow() {
			let that = this
			document.body.style.overflow = 'auto';
			/* if(!this.isLogin){
				uni.reLaunch({
					url:'/pages/login/index'
				})
			} */
			if (!this.loginStatus) {
				this.isOk = true
				this.notQx = true
				if (this.loginMsg != '') {
					uni.$u.toast(this.loginMsg)
				}
			} else {
				that.isOk = false
				that.notQx = false
				await that.initList()
			}

		},
		methods: {
			async initList() {
				try {
					const params = {}; // 
					const config = {}; // 
					await getTypeCount(params, config).then(res => {
						if ("msgCode" in res && (res.msgCode == "1003" || res.msgCode == "-401")) {
							this.notQx = true
						} else {
							this.deviceTyepList = res
						}
						this.isOk = true
					}).catch(err => {
						this.notQx = true
						this.isOk = true
					})
				} catch (error) {
					// 处理请求失败的逻辑
					/* console.error(error); */
				}
			},
			handClickItem(siteSubTypeCode, siteSubTypeName) {
				uni.$u.route({
					url: `/pages/yxsk/yljfbt/index?siteSubTypeCode=${siteSubTypeCode}&title=${siteSubTypeName}`
				});
			},
			getIcon(siteSubTypeCode) {
				return require(`@/static/icons/yxsk/${siteSubTypeCode}.png`);
			},

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		/* async onReady() {
			let that = this
			that.isOk = false
			that.notQx = false
			await that.initList()
		} */
	};
</script>
<style lang="scss" scoped>

</style>